// tips
// o-tips="提示内容"

export default {
    bind: function(node, directive, vnode){
        debugger
        // 接受入参
        var el = node;
        var value = directive.value;
        var $el = $(el);
        var attrs = options.attrs;
        // 设置el样式
        $el.css({
            "cursor": "pointer"
        })

        // 准备tips的基本dom
        var html = '<div class=\'io-tips animated fadeIn\' style=\'position: absolute; z-index:9999; background: #000; background: rgba(0,0,0,0.8); color: #fff; padding: 5px 10px; border-radius: 4px;\'><div class=\'arrow\' style=\'position: absolute;border-style: solid;\'></div>' + value + '</div>';

        // 显示
        var showTips = function () {
            // 插入到body
            $('body').append(html);
            var $tips = $('.io-tips');
            var $fadeIn = $('.fadeIn');
            var $arrow = $('.arrow');
            var maxwidth = attrs.maxwidth;
            //el添加max-width
            if (maxwidth) {
                $tips.css({
                    "max-width": maxwidth,
                });
            } else {
                $tips.css({
                    "max-width": 250,
                });
            }
            var delay =attrs.delay
            if(delay){
                var lazy =delay / 1000 +"s";
                $fadeIn.css({
                    "animation-delay": lazy,
                });
            }
            // 根据el计算tips位置
            var winSize = {
                w: $(window).outerWidth(),
                h: $(window).outerHeight()
            }
            var elSize = {
                x: $el.offset().left,
                y: $el.offset().top,
                w: $el.outerWidth(),
                h: $el.outerHeight()
            }
            var tipSize = {
                w: $tips.outerWidth(),
                h: $tips.outerHeight()
            }
            tipSize.x = elSize.x + elSize.w / 2 - tipSize.w / 2;
            tipSize.y = elSize.y - tipSize.h - 8;
            if (tipSize.y > 0) {
                // 设置tips的坐标
                $tips.css({
                    "top": tipSize.y
                });
                $arrow.css({
                    "bottom": -5,
                    "marginLeft": -5,
                    "border-width": "5px 5px 0",
                    "border-color": "rgba(0,0,0,0.8) transparent transparent",
                });
                if (tipSize.x > 0) {
                    if (winSize.w - tipSize.x < tipSize.w) {
                        $tips.css({
                            "right": 0,
                        });
                        $arrow.css({
                            "right": winSize.w - elSize.x - elSize.w / 2,
                        });
                    } else {
                        $tips.css({
                            "left": tipSize.x,
                        });
                        $arrow.css({
                            "left": '50%',
                        });
                    }
                } else {
                    $tips.css({
                        "left": 0,
                    });
                    $arrow.css({
                        "left": elSize.x + elSize.w / 2,
                    });
                }
            } else {
                tipSize.x = elSize.x + elSize.w / 2 - tipSize.w / 2;
                tipSize.y = elSize.y + elSize.h + 8;
                if(winSize.h - tipSize.y > tipSize.h){
                    设置tips的坐标
                    $tips.css({
                        "top": tipSize.y
                    });
                    $arrow.css({
                        "top": -5,
                        "marginLeft": -5,
                        "border-width": "0 5px 5px",
                        "border-color": "transparent transparent rgba(0,0,0,0.8)",
                    });
                    if (tipSize.x > 0) {
                        if (winSize.w - tipSize.x < tipSize.w) {
                            $tips.css({
                                "right": 0,
                            });
                            $arrow.css({
                                "right": winSize.w - elSize.x - elSize.w / 2,
                            });
                        } else {
                            $tips.css({
                                "left": tipSize.x,
                            });
                            $arrow.css({
                                "left": '50%',
                            });
                        }
                    } else {
                        $tips.css({
                            "left": 0,
                        });
                        $arrow.css({
                            "left": elSize.x + elSize.w / 2,
                        });
                    }
                }else{
                    $('.io-tips').remove();
                }
            }
        };
        // 隐藏
        var hideTips = function () {
            $('.io-tips').remove();
        };
        // 将方法绑定到监听事件中
        Yox.dom.on(el, 'mouseover', showTips);
        Yox.dom.on(el, 'mouseout', hideTips);
        // 返回销毁函数解绑监听事件
        return function () {
            Yox.dom.off(el, 'mouseover', showTips);
            Yox.dom.off(el, 'mouseout', hideTips);
        };
    },
    unbind: function(node, directive, vnode){
        vnode.data[directive.key]()
    }
}